<template>
  <div ref="myComponent" class="ai-chart">
    <div class="ai-cahrt-bnt" v-if="!showChart" @click.stop="openChart">问</div>
    <div class="ai-chart-content" ref="aichartcontent" v-else>
      <div class="chart-title">问问小果</div>
      <div class="message-content" id="message-content">
        <div
          v-for="(item, index) in messageList"
          :key="index"
          :class="
            item.role == 'user' ? 'message-result-user' : 'message-result-root'
          "
        >
          <div
            :class="
              item.role == 'user' ? 'user-header-user' : 'user-header-root'
            "
          >
            {{ item.role == "user" ? userName : "小果" }}
          </div>
          <div
            :class="
              item.role == 'user' ? 'user-message-user' : 'user-message-root'
            "
          >
            <span v-if="item.role == 'user'">{{ item.content }}</span>

            <MdPreview v-else :id="'preview-only'" :modelValue="item.content" />
          </div>
        </div>
      </div>
      <div class="question-commit">
        <textarea
          @keyup.enter="sendMessage"
          class="textarea-placeholder"
          v-model="message"
        />
        <div class="question-send">
          <span class="clear" @click.stop="clearMessage">清除</span>
          <Loading class="send-loading" v-if="sendLOading"></Loading>
          <span v-else class="send" @click.stop="sendMessage">发送</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
import { MdPreview, MdCatalog } from "md-editor-v3";
// preview.css相比style.css少了编辑器那部分样式
import "md-editor-v3/lib/preview.css";
import Loading from "./loading.vue";
import { getAiquestion } from "./api";
import { clear } from "console";

const store = useStore();

// Props
const props = defineProps({
  userName: {
    type: String,
    default: "用户",
  },
});

// Refs
const myComponent = ref<HTMLElement | null>(null);
const aichartcontent = ref<HTMLElement | null>(null);
const showChart = ref(false);
const message = ref("");
const sendLOading = ref(false);
const messageList = ref<any[]>([]);
const loadingText = ref([
  "正在请求中...",
  "正在连接数据库···",
  "正在分析数据···",
  "正在生成答案···",
  "正在返回结果···",
]);
const openChart = () => {
  showChart.value = true;
};
// Methods
const scrollToBottom = () => {
  const container = document.getElementById("message-content");
  if (container) {
    container.scrollTop = container.scrollHeight;
  }
};
const clearMessage = () => {
  messageList.value = [];
  localStorage.removeItem("messageList");
};
const sendMessage = () => {
  if (message.value) {
    let user: any = JSON.parse(localStorage.getItem("user"));
    let token = "";
    if (user && user["token"]) {
      token = user.token;
    }
    sendLOading.value = true;
    const data = {
      role: "user",
      content: message.value,
      token,
    };

    messageList.value.push({
      role: "user",
      content: message.value,
    });

    message.value = "";

    nextTick(() => {
      scrollToBottom();
    });
    getAiquestion(data)
      .then((res: any) => {
        const messageData = {
          role: "assistant",
          content: res.data.message,
        };
        console.log("res", res);

        messageList.value.push(messageData);
        localStorage.setItem("messageList", JSON.stringify(messageList.value));
        nextTick(() => {
          scrollToBottom();
        });
      })
      .finally(() => {
        sendLOading.value = false;
      });
  }
};

// Lifecycle
onMounted(() => {
  const _messageList: any = localStorage.getItem("messageList");
  if (_messageList) {
    messageList.value = JSON.parse(_messageList);
  }
  nextTick(() => {
    if (myComponent.value) {
      document.body.appendChild(myComponent.value);
    }
  });

  document.addEventListener("click", (event) => {
    if (
      event.target === undefined ||
      !aichartcontent.value?.contains(event.target as Node)
    ) {
      showChart.value = false;
    }
  });
});
</script>

<style>
pre {
  overflow: auto !important;
  background: #f2d5d5 !important;
  padding: 10px !important;
  border-radius: 4px !important;
}
</style>

<style scoped>
.send-loading {
  margin-left: 10px;
}
.ai-chart {
  z-index: 1600;
  position: fixed;
  right: 20px;
  bottom: 60px;
  font-size: 12px;
}
.ai-cahrt-bnt {
  height: 40px;
  width: 40px;
  background-color: #5261ed;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s;
}
.ai-chart-content {
  padding: 0 20px 10px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 600px;
  width: 450px;
  transition: all 0.3s;
  border-radius: 10px;
  background: linear-gradient(180deg, #f5f4f6, #e6ebf7);
  -moz-box-shadow: -1px 1px 5px #021433;
  -webkit-box-shadow: -1px 1px 5px #021433;
  box-shadow: -1px 1px 5px #021433;
}
.chart-title {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #beb6b6;
  font-weight: 500;
  font-size: 18px;
}
.message-content {
  flex: 1;
  width: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.user-message {
  flex: 1;
  background: #fdfdfe;
  border-radius: 8px;
  box-shadow: 0 16px 20px 0 rgba(174, 167, 223, 0.06);
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
}
.user-message-root {
  max-width: 320px;
  background: #fdfdfe;
  border-radius: 8px;
  box-shadow: 0 16px 20px 0 rgba(174, 167, 223, 0.06);
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
}
.user-message-user {
  max-width: 320px;
  background: #b6cec4;
  border-radius: 8px;
  box-shadow: 0 16px 20px 0 rgba(174, 167, 223, 0.06);
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
  margin-right: 10px;
  text-align: right;
}
.message-result-root {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  padding-right: 10px;
}
.message-result-user {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  margin-top: 10px;
  padding-right: 10px;
}
.question-commit {
  height: 90px;
  margin-top: 5px;
  padding-top: 5px;
  background-color: #ffffff;
  border-radius: 4px;
}
.user-header-root {
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  background-color: #5261ed;
  border-radius: 50%;
  margin-right: 10px;
  color: #fff;
}
.user-header-user {
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  background-color: #77a312;
  border-radius: 50%;
  margin-right: 10px;
  color: #fff;
}
.textarea-placeholder {
  width: 420px;
  height: 50px;
  padding: 10px 10px 0 10px;
}
textarea {
  border: none;
  outline: none;
  resize: none;
}
.question-send {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.send {
  padding: 2px 5px;
  background-color: #5261ed;
  border-radius: 2px;
  margin-right: 10px;
  color: #ffffff;
  cursor: pointer;
}
.clear {
  margin-right: 10px;
  color: #626263;
  cursor: pointer;
}
</style>
